﻿<html lang="en">
<head>
<meta charset="UTF8">
<title></title>
<meta name="keywords" content=",Basic Layout,easyui demo">
<meta name="description" content="">
	<link rel="stylesheet" type="text/css" href="../js/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
		<div data-options="region:'north'" style="height:50px"></div>

		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
		<div region="west" hide="true" split="true" title="导航菜单" style="width:180px;" id="west" class="">
			<div id="nav" class="easyui-accordion " fit="true" border="false" title="欢迎使用">  <!-- fit 展开幅度，是整个立方体的高度，还是子项高度-->
				<div title="基础功能" class="" id="tree" style="overflow:auto;padding:10px">
					
				</div>
					
			</div>
		</div>
		
		<div data-options="region:'center',iconCls:'icon-ok'">
			<div id="tabs" class="easyui-tabs"  fit="true" border="false" >
				<div title="欢迎使用" style="padding:20px;overflow:hidden; color:red; " >
					  <h1 style="font-size:24px;">欢迎使用项目管理系统</h1>
				</div>
			</div>
		</div>
		
		<div data-options="region:'south',split:true" style="height:50px;">底部</div>
		
		
	
	

</body>
</html>
<script>
 var _menus = {
		                 "menus":[
						           {"menuid":"1","icon":"icon-sys","menuname":"基础功能",
							      "menus":[
									{"menuid":"12","menuname":"网页","icon":"icon-save","url":"baseDataGrid.html"},
									{"menuid":"13","menuname":"类","icon":"icon-class","url":"menu1/class.html"},
									{"menuid":"14","menuname":"菜单","icon":"icon-role","url":"demo2.html"},
									{"menuid":"15","menuname":"菜单","icon":"icon-set","url":"demo.html"},
									{"menuid":"16","menuname":"菜单","icon":"icon-log","url":"demo1.html"}
								    ]}
				]};
$(document).ready(function() { 
	InitLeftMenu();
	tabClose();
	tabCloseEven();
}); 

//初始化左侧
function InitLeftMenu() {
	$("#nav").accordion({animate:false});//为id为nav的div增加手风琴效果，并去除动态滑动效果
	$('#tree').tree({    
	    url:'tree_data.json',
	    onSelect: function(node){
			//alert(node.text);  // 在用户点击的时候提示
// 	    	node.children==undefined  //判断节点有没有子节点
			if(node.children==undefined){
				if(!$('#tabs').tabs('exists',node.text)){
					$('#tabs').tabs('add',{
						title: node.text,
						closable:true, 
						content:"<iframe src="+node.attributes.url+" style='height:100%;width:100%;' scrolling='no' frameBorder='no'></iframe>",
						selected: true
					});
				}else{
					$('#tabs').tabs('select',node.text);
				}
				

// 				$('#tabs').tabs({    
// 				    border:false,    
// 				    onSelect:function(title){    
// 				        alert(title+' is selected');    新建一个tabs 大概，是增加class  tabs 
// 				    }    
// 				}); 
// 				alert(node.attributes.url);
			}
		}

	});  
// 	$('#tree').tree('getSelected')  //获取选中节点

// 	var t = $('#tree');
// 	var node = t.tree('getSelected');
// 	t.tree('append', {
// 		parent: (node?node.target:null),
// 		data: [{
// 			text: 'new item1'
// 		},{
// 			text: 'new item2'
// 		}]
// 	});
// 	function removeit(){
// 		var node = $('#tt').tree('getSelected');
// 		$('#tt').tree('remove', node.target);
// 	}
// 	function collapse(){
// 		var node = $('#tt').tree('getSelected');
// 		$('#tt').tree('collapse',node.target);
// 	}
// 	function expand(){
// 		var node = $('#tt').tree('getSelected');
// 		$('#tt').tree('expand',node.target);
// 	}
	
	
//     $.each(_menus.menus, function(i, n) {//$.each 遍历_menu中的元素
// 		var menulist ='';
// 		menulist +='<ul>';
//         $.each(n.menus, function(j, o) {
// 			menulist += '<li><div><a ref="'+o.menuid+'" href="#" rel="' + o.url + '" ><span class="icon '+o.icon+'" >&nbsp;</span><span class="nav">' + o.menuname + '</span></a></div></li> ';
//         })
// 		menulist += '</ul>';

// 		$('#nav').accordion('add', {
//             title: n.menuname,
// 			content: menulist
// 			<!--iconCls: 'icon ' + n.icon,-->
//         });

//     });

// 	$('.easyui-accordion li a').click(function(){//当单击菜单某个选项时，在右边出现对用的内容
// 		var tabTitle = $(this).children('.nav').text();//获取超链里span中的内容作为新打开tab的标题

// 		var url = $(this).attr("rel");
// 		var menuid = $(this).attr("ref");//获取超链接属性中ref中的内容
// 		var icon = getIcon(menuid,icon);

// 		addTab(tabTitle,url,icon);//增加tab
// 		$('.easyui-accordion li div').removeClass("selected");
// 		$(this).parent().addClass("selected");
// 	}).hover(function(){
// 		$(this).parent().addClass("hover");
// 	},function(){
// 		$(this).parent().removeClass("hover");
// 	});

// 	//选中第一个
// 	var panels = $('#nav').accordion('panels');
// 	var t = panels[0].panel('options').title;
//     $('#nav').accordion('select', t);
}
//获取左侧导航的图标
function getIcon(menuid){
	var icon = 'icon ';
	$.each(_menus.menus, function(i, n) {
		 $.each(n.menus, function(j, o) {
		 	if(o.menuid==menuid){
				icon += o.icon;
			}
		 })
	})

	return icon;
}

function addTab(subtitle,url,icon){
	if(!$('#tabs').tabs('exists',subtitle)){
		$('#tabs').tabs('add',{
			title:subtitle,
			content:createFrame(url),
			closable:true
			<!--icon:icon-->
		});
	}else{
		$('#tabs').tabs('select',subtitle);
		$('#mm-tabupdate').click();
	}
	tabClose();
}

function createFrame(url)
{
	var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	return s;
}

function tabClose()
{
	/*双击关闭TAB选项卡*/
	$(".tabs-inner").dblclick(function(){
		var subtitle = $(this).children(".tabs-closable").text();
		$('#tabs').tabs('close',subtitle);
	})
	/*为选项卡绑定右键*/
	$(".tabs-inner").bind('contextmenu',function(e){
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});

		var subtitle =$(this).children(".tabs-closable").text();

		$('#mm').data("currtab",subtitle);
		$('#tabs').tabs('select',subtitle);
		return false;
	});
}
//绑定右键菜单事件
function tabCloseEven()
{
	//刷新
	$('#mm-tabupdate').click(function(){
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		$('#tabs').tabs('update',{
			tab:currTab,
			options:{
				content:createFrame(url)
			}
		})
	})
	//关闭当前
	$('#mm-tabclose').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('#tabs').tabs('close',currtab_title);
	})
	//全部关闭
	$('#mm-tabcloseall').click(function(){
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			$('#tabs').tabs('close',t);
		});
	});
	//关闭除当前之外的TAB
	$('#mm-tabcloseother').click(function(){
		$('#mm-tabcloseright').click();
		$('#mm-tabcloseleft').click();
	});
	//关闭当前右侧的TAB
	$('#mm-tabcloseright').click(function(){
		var nextall = $('.tabs-selected').nextAll();
		if(nextall.length==0){
			//msgShow('系统提示','后边没有啦~~','error');
			alert('后边没有啦~~');
			return false;
		}
		nextall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});
	//关闭当前左侧的TAB
	$('#mm-tabcloseleft').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		if(prevall.length==0){
			alert('到头了，前边没有啦~~');
			return false;
		}
		prevall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});

	//退出
	$("#mm-exit").click(function(){
		$('#mm').menu('hide');
	})
}

//弹出信息窗口 title:标题 msgString:提示信息 msgType:信息类型 [error,info,question,warning]
function msgShow(title, msgString, msgType) {
	$.messager.alert(title, msgString, msgType);
}
</script>